<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="statistics_title">申诉记录</view>
			<view class="statistics_select_box">
				<view class="statistics_select_item" :class="select_index==1?'statistics_select_item_active':''" @click="handleSelect(1)">
					处理中<view class="statistics_select_item_heng" v-if="select_index==1"></view>
				</view>
				<view class="statistics_select_item" :class="select_index==2?'statistics_select_item_active':''" @click="handleSelect(2)">
					已处理<view class="statistics_select_item_heng" v-if="select_index==2"></view>
				</view>	
			</view>	
			<view class="appeal_content_box">
				<view class="appeal_content_item_box" hover-class="hover_class" v-for="(data,index) in list" :key="index"  @click="goDetail(data.id)">
					<view class="appeal_content_item_title">申诉原因：{{data.recource}}</view>
					<view class="appeal_content_item_desc">问题描述：{{data.remark}}</view>	
					<view class="appeal_content_item_btn_box">
						<view class="appeal_content_item_btn1" v-if="data.status==0" @click.stop="handleRevoke(data.id)">撤销申诉</view>
						<view class="appeal_content_item_btn2" v-if="data.status==0">查看进度</view>	
						<view class="appeal_content_item_btn2" style="border: none;margin-right: 20rpx;" v-if="data.status==1">申诉已通过</view>
						<view class="appeal_content_item_btn2" style="border: none;margin-right: 20rpx;" v-if="data.status==2">申诉已拒绝</view>
						<view class="appeal_content_item_btn2" v-if="data.status!=0">查看详情</view>	
					</view>	
				</view>
				<view class="page_tip" v-if="list.length!=0">我是有底线的~</view> 
				<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
				<view  style="height:80rpx;"></view>	
			</view>
		</view>
		</view>
		</dcp-scroller>
	</view>
	
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				isLoading:false,
				select_btn_status:true,
				count:0,
				list:[],					 
				page:1,
				select_index: 1, 
				info: null,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back1.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 54
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		onShow(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
		},
		onReachBottom(){
			var a = this
			console.log('触底了') 
			if(a.count >a.list.length){
				console.log(a.list.length)
				a.page++;
				a.getList()
			}
		},
		methods: {
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.page = 1
					a.getList()
				},200)
			},
			handleRevoke(id){
				var a = this
				a.$showModal({
					title:'提示',
					content:'确认要撤销申诉吗',
					showCancel:true,
					confirmText:'确认',
					success: (res) => {
						if(res.confirm){
							uni.showLoading({
								title:'加载中'
							})
							a.globalajax('wallet/cancelOrderRefuse',{
								id:id
								},'GET',function(res) {
									console.log(res);
									uni.hideLoading()
									uni.stopPullDownRefresh()
									if(res.data.code==200){
										uni.showToast({
											title:'操作成功',
											icon:'none'
										})
										setTimeout(() => {
											a.list = []
											a.page = 1
											a.getList()
										}, 300)
									}else{
										a.$showModal({
											title:'友情提示',
											content:res.data.msg,
											showCancel:false,
											confirmText:'我知道了',
											success: (res) => {
											}
										}); 
									} 
								}
							); 
						}
					}
				});  
				
			},
			getList(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('wallet/refundList',{
						page:a.page,
						per_page:10,
						type:a.select_index
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						a.isLoading = false
						setTimeout(()=>{
							a.select_btn_status = true
						},1000)
						if(res.data.code==200){
							var temp_arr = res.data.data.list
							for (var i = 0; i < temp_arr.length; i++) {
								if(temp_arr[i].image&&temp_arr[i].image!=''){
									temp_arr[i].image_arr = JSON.parse(temp_arr[i].image)
								}else{
									temp_arr[i].image_arr = []
								}
							}
							a.list = a.list.concat(temp_arr)
							a.count = res.data.data.total
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			}, 
			goDetail(id){
				uni.navigateTo({
					url:'/pages/user/appealDetail?id=' + id
				})
			},
			handleSelect(index) {
				var a = this
				if(a.select_btn_status){
					a.select_btn_status = false
					a.select_index = index
					a.list = []
					a.page = 1
					a.getList()
				}
				
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height: 664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.statistics_select_box{
			margin-top: 18rpx;
			display: flex;
			align-items: center;
			width: 750rpx;
			// border-bottom: 2rpx solid rgba(228, 231, 237, 0.4);
			.statistics_select_item{
				height: 80rpx;
				line-height: 80rpx;
				width: 168rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
				.statistics_select_item_heng{
					position: absolute;
					bottom: 0;
					left:48rpx;
					width: 64rpx;
					height: 6rpx;
					background-color: #fff;
					border-radius: 32rpx;
				}
			}
			.statistics_select_item_active{
				color: #fff;
			}
		}
		.statistics_title{
			color: #fff;
			font-size: 44rpx; 
			font-weight:550;
			padding-left: 24rpx;
		}
		.appeal_content_box{
			padding-top: 40rpx;
			.appeal_content_item_box{
				width: 702rpx;
				height: 236rpx;
				margin: 0 auto;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				.appeal_content_item_title{
					padding: 24rpx;
					color: rgba(48, 49, 51, 1);
					font-size: 36rpx;
					font-weight: bold;
					white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				    word-break: break-all;	
				}
				.appeal_content_item_desc{
					padding: 24rpx;
					color:rgba(96, 98, 102, 1);
					font-size: 30rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;	
					padding-top: 0;
				}
				.appeal_content_item_btn_box{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 24rpx;
					.appeal_content_item_btn1{
						width: 160rpx;
						height: 56rpx;
						text-align: center;
						line-height: 56rpx;
						border: 2rpx solid rgba(228, 231, 237, 1);
						font-size: 28rpx;
						border-radius: 16rpx;
						color: #242831;
						margin-right: 20rpx;
					}
					.appeal_content_item_btn2{
						width: 160rpx;
						height: 56rpx;
						text-align: center;
						line-height: 56rpx;
						border: 2rpx solid #418AFF;
						font-size: 28rpx;
						border-radius: 16rpx;
						color: #418AFF;
					}
				}
			}
		}
	}
</style>